<template>
    <div id="guanzhuti">
      <!--空白页-->
      <div v-if="chenload">
		<div v-if="teacher.length!=0||teacher.length!='0'">
			<!-- <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmore"> -->
				<div class="all" >
					<div class="doc" v-for="(item,index) in teacher" @click="te(item)">
						<img :src="img+item.avatar" alt="">
						<p>{{item.name}}</p>
						<p>{{item.honor}}</p>
						<p @click.stop="quguan1(item)">已关注</p>
					</div>
				</div>
			<!-- </mt-loadmore> -->
		</div>
		<div v-else class="chen-kongbai">
			<div class="chen-kongpic">
				<img :src="imgSrc" mode=""></img>
			</div>
			<div class="chen-kong-text"><span>您暂未关注任何讲师</span></div>
		</div>

		<!--推荐关注-->
		<div class="tuijian">
			<div class="tuitop">
			   <p>推荐关注</p>
			   <!-- <img @click="recomTeacher()" src="../../../src/assets/img/huanteacher.png" alt=""> -->
			</div>
			<div>
				<div class="all" >
					<div class="doc" v-for="(item,index) in recomteacher" @click="te(item)">
						<img :src="img+item.avatar" alt="">
						<p>{{item.name}}</p>
						<p>{{item.honor}}</p>
						<p @click.stop="quguan(item)" style="background: #0287FF;color: #fff;">关注</p>
					</div>
				</div>
			</div>
		</div>
	</div>

  <div class="loadmore" v-else>
		<img src="../../../src/assets/img/load.gif" alt="">
	</div>


    </div>
</template>

<script>
    export default {
        name: "Focus",
      data(){
          return{
			imgSrc: require("../../assets/img/kongbai.png"), 
			chenload:false,
            teacher:[],
            img:this.$store.state.img,
            bol:true,
            page:1,
            allLoaded:false,
			recomteacher:[],
          }
      },
      methods:{
        te(item){
          this.$router.push({
            path:'/steach',
            query:{
              id:item.id
            }
          })
        },
	
		quguan1(item){
			var that = this;
			that.axios.get(this.$store.state.url +'find/teacherColl',{
				 params:{
					 id:item.id
				 }
			}).then(res=>{
				if(res.data.errcode==0||res.data.errcode=='0'){
					that.$toast({
					  message:'已取消关注',
					  position:'bottom'
					});
					that.getFollow();
					that.recomTeacher();
				}else{
					that.$toast({
					  message:res.data.msg,
					  position:'bottom'
					});
				}
			})
		},
        quguan(item){
			// console.log(item);
			var that = this;
			that.axios.get(this.$store.state.url +'find/teacherColl',{
				 params:{
					 id:item.id
				 }
			}).then(res=>{
				if(res.data.errcode==0||res.data.errcode=='0'){
					that.$toast({
					  message:'关注成功',
					  position:'bottom'
					});
					this.getFollow();
					that.recomTeacher();
				}else{
					that.$toast({
					  message:res.data.msg,
					  position:'bottom'
					});
				}
			})
        },
		// 用户关注教师
		getFollow(){
			this.axios.get(this.$store.state.url + 'User/getFollow',{
				params:{
					page:1,
					limit:10000
				}
			}).then(res=>{
			
			  // console.log(res.data);
				this.chenload=true;
			  if(res.data.errcode==0||res.data.errcode=='0'){
				this.teacher = res.data.data.follow
				}
			})
		},
		// 用户推荐教师
		recomTeacher(){
			this.axios.get(this.$store.state.url + 'User/recomTeacher',{
				
			}).then(res=>{
			
			  // console.log(res.data);
				this.chenload=true;
			  if(res.data.errcode==0||res.data.errcode=='0'){
				this.recomteacher = res.data.data.recom
			  }
			})
		}
      },
      mounted() {
		  this.sdk.getJSSDK('','',this.$store.state.url);	
        this.getFollow();
        this.recomTeacher();
      }
    }
</script>

<style scoped>
	.van-tabs--line .van-tabs__wrap{
		height: .68rem !important;
	}
#guanzhuti{
	padding-bottom: 0.2rem;
}
  .kong{
    width: 2.8rem;
    margin-top: 22%;
  }
  .tuijian{
    margin-top: 0.5rem;
	padding-bottom: 1rem;
  }
  .tuitop{
	  width: 6.9rem;
	  margin: auto;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
  }
  .tuitop p{
	  font-size: 0.34rem;
	  color: #333;
	  font-weight: bold;
  }
  .tuitop img{
	  width: 1.18rem;
	  height: .34rem;
	  margin-top: .1rem;
  }
  .all{
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.05rem;
  }
    .doc{
      width:2.1rem;
      background:rgba(255,255,255,1);
      box-shadow:0 0 0.1rem 0 rgba(71,68,80,0.1);
      border-radius:0.08rem;
      text-align: center;
      margin-top: 0.3rem;
      margin-left: 0.3rem;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      justify-content: center;
      box-sizing: border-box;
      padding-bottom: 0.2rem;
    }
  .doc img{
    margin-top: 0.3rem;
    width: 1.2rem;
    height:1.2rem;
    border-radius: 50%;
  }
  .doc p{
    width: 100%;
  }
  .doc p:nth-child(2){
    font-size: 0.28rem;
    color:rgba(51,51,51,1);
	margin-top: 0.1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  .doc p:nth-child(3){
    font-size: 0.24rem;
    color: #C2C9D3;
	margin: 0.1rem 0 .1rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
  }
  .doc p:nth-child(4){
    margin: auto;
    width:1rem;
    height:0.44rem;
    background:rgba(240,240,240,1);
    border-radius:0.22rem;
    font-size:0.24rem;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height: 0.44rem;
    text-align: center;
    margin-top: 0.1rem;
  }
</style>
